<template>
  <div>
    <div >
      <!-- 页头 -->
      <div class="back">
        <i class="el-icon-back" @click="$router.go(-1)"></i>
        <span style="padding: 10px; color: rgba(0, 0, 0, 0.15)">|</span>
        <span style="font-size: 20px; font-weight: 500; color: #2f343e"
          >情报详情</span
        >
      </div>
      <!-- 主题 -->
      <div class="box-top">
        <div
          style="
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 550;
            margin-bottom: 20px;
          "
        >
          基本信息
        </div>
        <div class="box-top-content">
          <!-- 第一行 -->
          <div style="display: flex">
            <div style="display: flex">
              <div style="font-size: 14px; color: #606266; width: 100px">
                IP:
              </div>
              <div style="font-size: 14px; color: #4b6eef; width: 250px">
                185.198.59.121
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  font-size: 14px;
                  color: #606266;
                  width: 100px;
                  margin-left: 145px;
                "
              >
                地理位置：
              </div>
              <div style="font-size: 14px; color: #606266; width: 335px">
                罗马尼亚，布加勒斯特，布加勒斯特,Host Sailor Ltd
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  font-size: 14px;
                  color: #606266;
                  width: 100px;
                  margin-left: 145px;
                "
              >
                开放端口：
              </div>
              <div style="font-size: 14px; color: #333435; width: 250px">
                8012
              </div>
            </div>
          </div>
          <!-- 第二行 -->
          <div style="display: flex; margin-top: 20px; margin-bottom: 20px">
            <div style="display: flex">
              <div style="font-size: 14px; color: #606266; width: 100px">
                AS:
              </div>
              <div style="font-size: 14px; color: #606266; width: 250px">
                60117()
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  font-size: 14px;
                  color: #606266;
                  width: 100px;
                  margin-left: 145px;
                "
              >
                更新时间：
              </div>
              <div style="font-size: 14px; color: #606266; width: 335px">
                2023-03-28
              </div>
            </div>
            <div style="display: flex">
              <div
                style="
                  font-size: 14px;
                  color: #606266;
                  width: 100px;
                  margin-left: 145px;
                "
              >
                来源：
              </div>
              <div style="font-size: 14px; color: #333435; width: 250px">
                国家互联网应急中心(CNCERT)
              </div>
            </div>
          </div>
          <!-- 第三行 -->
          <div style="display: flex">
            <div style="display: flex">
              <div style="font-size: 14px; color: #606266; width: 100px">
                Tags:
              </div>
              <div style="font-size: 14px; color: #4b6eef; display: flex">
                <div
                  style="
                    background: rgba(75, 110, 239, 0.1);
                    border: 1px solid rgba(75, 110, 239, 1);
                    border-radius: 2px;
                    padding-left: 10px;
                    padding-right: 10px;
                    height: 20px;
                  "
                >
                  挖矿
                </div>
                <div
                  style="
                    background: rgba(75, 110, 239, 0.1);
                    border: 1px solid rgba(75, 110, 239, 1);
                    border-radius: 2px;
                    padding-left: 10px;
                    padding-right: 10px;
                    height: 20px;
                    margin-left: 10px;
                    margin-right: 10px;
                  "
                >
                  漏洞利用
                </div>
                <div
                  style="
                    background: rgba(75, 110, 239, 0.1);
                    border: 1px solid rgba(75, 110, 239, 1);
                    border-radius: 2px;
                    padding-left: 10px;
                    padding-right: 10px;
                    height: 20px;
                  "
                >
                  cve-2017-118B2
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间盒子 -->
      <div class="box-content">
        <div
          style="
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 550;
            margin-bottom: 20px;
          "
        >
          威胁情报
        </div>
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <el-form-item
            label="IOC信息:"
            style="margin-left: 92px; margin-top: 13px"
          >
            <HkTable
              ref="table"
              :loading="loading"
              :table-data="arrList"
              :table-columns="tableLabelList"
              :is-need-index="true"
              style="width: 90%"
            >
            
            </HkTable>
          </el-form-item>
        </el-form>
      </div>

      <!-- 下面盒子 -->
      <div class="box-content1">
        <div
          style="
            font-size: 16px;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 550;
            margin-bottom: 20px;
          "
        >
          关联情报
        </div>
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <!-- 关联域名 -->
          <el-form-item
            label="关联域名:"
            style="margin-left: 92px; margin-top: 13px"
          >
            <HkTable
              ref="table"
              :loading="loading"
              :table-data="nameList"
              :table-columns="tableNameList"
              :is-need-index="true"
              style="width: 90%"
            >
            <template #name="scope">
                    <div>
                      <p style="color: #4B6EEF;">
                        {{ scope.row.row.name }}
                      </p>
                    </div>
                  </template>
            </HkTable>
          </el-form-item>
        </el-form>
      </div>
      <div class="box-content1">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <!-- 关联URL -->
          <el-form-item
            label="关联URL:"
            style="margin-left: 92px; margin-top: 13px"
          >
            <HkTable
              ref="table"
              :loading="loading"
              :table-data="urlList"
              :table-columns="tableUrlList"
              :is-need-index="true"
              style="width: 90%"
            >
                <template #name="scope">
                    <div>
                      <p style="color: #4B6EEF;">
                        {{ scope.row.row.name }}
                      </p>
                    </div>
                  </template>
            </HkTable>
          </el-form-item>
        </el-form>
      </div>
      <div class="box-content1">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          label-width="120px"
          label-position="left"
        >
          <!-- 关联样本 -->
          <el-form-item
            label="关联样本:"
            style="margin-left: 92px; margin-top: 13px"
          >
            <HkTable
              ref="table"
              :loading="loading"
              :table-data="bookList"
              :table-columns="tableBookList"
              :is-need-index="true"
              style="width: 90%"
            >
              <!-- 样本 -->
           <template #name="scope">
                    <div>
                      <p style="color: #4B6EEF;">
                        {{ scope.row.row.name }}
                      </p>
                    </div>
                  </template>
  
            </HkTable>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$router.go(-1)">取 消</el-button>
      <el-button @click="$router.go(-1)" type="danger" plain>拒 绝</el-button>
      <el-button type="primary" @click="$router.go(-1)">通 过</el-button>
   
    </div>
  </div>
</template>
<script>
import HkTable from "@/components/HKTable";

export default {
  components: { HkTable },
  data() {
    return {
      cycleNodeOption: [],
      formData: {
        cronType: "1",
        type: "",
        name: "",
        cycleTime: 0,
        timeNode: "",
        times: "",
        cycleNode: "",
      },
      // 表单参数
      rules: {
        name: [
          { required: true, message: "作业名称不能为空", trigger: "blur" },
        ],
        type: [{ required: true, message: "请选择作业类型", trigger: "blur" }],
        cycleTime: [{ required: true, message: "请选择", trigger: "blur" }],
        timeNode: [{ required: true, message: "请选择", trigger: "blur" }],
        day: [{ required: true, message: "请选择", trigger: "blur" }],
        times: [{ required: true, message: "请选择", trigger: "blur" }],
      },
      //   表头名称
      tableLabelList: [
        {label: "来源", param: "name",},
        {label: "分类",param: "datasourceName",},
        {label: "家族",param: "outputDatasourceName",},
        {label: "组织", param: "people",  },
        {label: "更新时间", param: "time", },

      ],
      arrList: [
        {
          name: "VenusEye(1)",
          datasourceName: "漏洞利用",
          outputDatasourceName: "一",
          people: "一",
          time:"2022-12-25"
        },
          {
          name: "开源情报(470)",
          datasourceName: "可疑",
          outputDatasourceName: "一",
          people: "一",
          time:"2022-10-23"
        },
      ],
      // 域名
      tableNameList: [
        { label: "域名", param: "name", type: "slot" },
        { label: "发现时间", param: "time",  width: "250px" },
      ],
      nameList: [
        {
          name: "pakket.digital",
          time: "2020-12-25",
        },
         {
          name: "aflossen.online",
          time: "2020-12-25",
        },
         {
          name: "aflossen",
          time: "2020-12-25",
        },
      ],
      // URL
      tableUrlList: [
        { label: "URL", param: "name",type: "slot"},
        {
          label: "威胁等级",
          param: "datasourceName",
          width: "160px",
        },

        { label: "发现时间", param: "time", width: "250px" },
      ],
      urlList: [
        {
          name: "https://pakket.digital/DHL.html",
          datasourceName: "100",
          time: "2022-12-09",
        },
         {
          name: "https://pakket.digital/kw.txt",
          datasourceName: "80",
          time: "2022-10-18",
        },
         {
          name: "https://185.198.59.121/hma",
          datasourceName: "50",
          time: "2022-12-29",
        },
      ],
      // 样本
      tableBookList: [
        { label: "HASH", param: "name",type: "slot" },
        {
          label: "威胁等级",
          param: "datasourceName",
          width: "160px",
        },
        { label: "检测时间", param: "people", width: "250px", },
      ],
      bookList: [
        {
          name: "fufnksfiefjknioe158956sfdgd6g6sg6dg56ds",
          datasourceName: "100",
          people: "2022-12-09",
        },
         {
          name: "fufnksfiefjknioe158956sfdgd6g6sg6db3109",
          datasourceName: "0",
          people: "2021-10-18",
        },
         {
          name: "fufnksfiefjknioe158956sfd2gd6g6sg6dcf735",
          datasourceName: "50",
          people: "2020-12-29",
        },
      ],
    };
  },
};
</script>

<style scoped lang="scss">
.back {
  margin-bottom: 20px;
}
.box-top {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  .content-box-left {
    margin-left: 92px;
  }
  .content-box-right {
    margin-left: 160px;
  }
}
.box-content {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
}
.box-content1 {
  background-color: #ffffff;
  padding: 20px;
}
.son-panel {
  display: flex !important;
}
.dialog-footer {
  margin-top: 100px;
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
  padding: 14px 20px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
::v-deep {
  .el-form-item--medium .el-form-item__content {
    margin-bottom: 20px;
  }
  .box-top[data-v-1a8a03f8] {
    padding-bottom: 11px;
  }
  .el-input--medium .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .el-form-item__content {
    line-height: 0px;
  }
  .el-pagination {
    display: NONE;
  }
  .el-form-item--medium .el-form-item__label {
    margin-top: -2px;
  }
  .el-table th.el-table__cell > .cell {
    padding-left: 37px;
  }
  .el-textarea__inner {
    resize: none;
  }
  .el-input--medium .el-input__icon {
    margin-left: 153px;
  }
   .el-table .cell {padding-left: 37px}
   .pagination-container[data-v-72233bcd] {display: none;}
   .targetTable {padding-bottom: 0px;}
   .main-container {padding-bottom: 200px !important;}
}
</style>
